<template>
  <div class="content">
    <section>
      <div class="container clear-fix">
        <h1>报名中...</h1>
        <div class="cart" v-for="(item, key) of list" :key="key">
          <div class="img">
            <img v-lazy="'https://img.bosszhipin.com/beijin/upload/image/20200524/74571e3f7304febb0a17f44b7b329c31.jpg?x-oss-process=image/format,jpg'"/>
          </div>
          <div class="title">
          <span class="icon">
            <img src="@/assets/img/icon.png" alt="">
          </span>
            <p>重庆英才,职等你来</p>
          </div>
          <div class="company">
            <span>企业:</span>
            <span class="number">10176</span>
            家
            <span>岗位:</span>
            <span class="number">2413</span>
            家
            <span>参与:</span>
            <span class="number">23sd4</span>
            人
          </div>
          <div class="face_test">面试：
            <span>08:00 9:00 - 15:00 16:00</span>
          </div>
          <div class="tip"></div>
        </div>
      </div>
    </section>
    <section>
      <div class="container clear-fix">
        <h1>已结束</h1>
        <div class="cart" v-for="(item, key) of list" :key="key">
          <div class="img">
            <img src="https://img.bosszhipin.com/beijin/upload/image/20201030/c399048741d6e754a2ffc144ea496078.jpg?x-oss-process=image/format,jpg" alt="">
          </div>
          <div class="title">
          <span class="icon">
            <img src="@/assets/img/icon.png" alt="">
          </span>
            <p>重庆英才,职等你来</p>
          </div>
          <div class="company">
            <span>企业:</span>
            <span class="number">10176</span>
            家
            <span>岗位:</span>
            <span class="number">2413</span>
            家
            <span>参与:</span>
            <span class="number">23sd4</span>
            人
          </div>
          <div class="face_test">面试：
            <span>08:00 9:00 - 15:00 16:00</span>
          </div>
          <div class="tip"></div>
        </div>
      </div>
    </section>
    <section>
      <div class="container clear-fix">
        <h1>已结束</h1>
        <div class="cart" v-for="(item, key) of list" :key="key">
          <div class="img">
            <img src="https://img.bosszhipin.com/beijin/upload/image/20201030/c399048741d6e754a2ffc144ea496078.jpg?x-oss-process=image/format,jpg" alt="">
          </div>
          <div class="title">
          <span class="icon">
            <img src="@/assets/img/icon.png" alt="">
          </span>
            <p>重庆英才,职等你来</p>
          </div>
          <div class="company">
            <span>企业:</span>
            <span class="number">10176</span>
            家
            <span>岗位:</span>
            <span class="number">2413</span>
            家
            <span>参与:</span>
            <span class="number">23sd4</span>
            人
          </div>
          <div class="face_test">面试：
            <span>08:00 9:00 - 15:00 16:00</span>
          </div>
          <div class="tip"></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Home-content',
  data () {
    return {
      list: [{}, {}, {}, {}],
      show: true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/base.css";
@import "../assets/css/animate.min.css";

section {
  margin-bottom: 40px;
}

.content {
  background-color: #f7f7f7;

  h1 {
    padding: 12px 0;
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
    color: #414A60;

    &.hover {
      display: none;
    }
  }

  .cart {
    width: 23%;
    background-color: #ffffff;
    border-radius: 10px;
    transition: .3s linear;
    margin: 10px;
    float: left;
    display: block;
    overflow: hidden;
    color: #8D92A1;

    &:hover {
      cursor: pointer;
      box-shadow: 0 0 15px 1px rgba(0, 0, 0, .3);
      transform: translateY(-5px);

      .company {
        .number {
          animation: swing .8s linear;
        }
      }
    }
  }

  .img {
    height: 120px;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }

  .title {
    height: 23px;
    line-height: 23px;
    padding: 5px 5px;

    span {
      float: left;
    }

    p {
      float: left;
    }
  }

  .company {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    padding: 8px 5px;

    .number {
      display: inline-block;
      color: #f3a07f;
      transition: .3s linear;
      transform: rotate(0);
    }
  }

  .face_test {
    padding: 10px 5px;
    font-size: 14px;
  }
}

/*

@keyframes bounce {
  0% {
    transform: translateY(-50%);
  }
  20% {
    transform: translateY(-25%);
  }
  40% {
    transform: translateY(0%);
  }
  60% {
    transform: translateY(-25%);
  }
  80% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}
*/

</style>
